<!doctype html>
<html lang="en" data-color-mode="dark">
<head>
<meta charset="utf-8">
<title>Quick Reference Cheatsheet
 &#x26;  quickreference cheatsheet &#x26;  Quick Reference</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta description="Quick Reference Cheatsheet
===

Here&#x27;s a style reference you can use on your Quick Reference cheat sheet!. Sharing Quick Reference Cheat Sheets for Developers">
<meta keywords="quickreference,reference-cli,reference,refs-cli,refs,cli">
<link rel="icon" href="data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%221em%22%20width%3D%221em%22%3E%20%3Cpath%20d%3D%22m21.66%2010.44-.98%204.18c-.84%203.61-2.5%205.07-5.62%204.77-.5-.04-1.04-.13-1.62-.27l-1.68-.4c-4.17-.99-5.46-3.05-4.48-7.23l.98-4.19c.2-.85.44-1.59.74-2.2%201.17-2.42%203.16-3.07%206.5-2.28l1.67.39c4.19.98%205.47%203.05%204.49%207.23Z%22%20fill%3D%22%23c9d1d9%22%2F%3E%20%3Cpath%20d%3D%22M15.06%2019.39c-.62.42-1.4.77-2.35%201.08l-1.58.52c-3.97%201.28-6.06.21-7.35-3.76L2.5%2013.28c-1.28-3.97-.22-6.07%203.75-7.35l1.58-.52c.41-.13.8-.24%201.17-.31-.3.61-.54%201.35-.74%202.2l-.98%204.19c-.98%204.18.31%206.24%204.48%207.23l1.68.4c.58.14%201.12.23%201.62.27Zm2.43-8.88c-.06%200-.12-.01-.19-.02l-4.85-1.23a.75.75%200%200%201%20.37-1.45l4.85%201.23a.748.748%200%200%201-.18%201.47Z%22%20fill%3D%22%23228e6c%22%20%2F%3E%20%3Cpath%20d%3D%22M14.56%2013.89c-.06%200-.12-.01-.19-.02l-2.91-.74a.75.75%200%200%201%20.37-1.45l2.91.74c.4.1.64.51.54.91-.08.34-.38.56-.72.56Z%22%20fill%3D%22%23228e6c%22%20%2F%3E%20%3C%2Fsvg%3E" type="image/svg+xml">
<link rel="stylesheet" href="..\..\style\style.css">
<link rel="stylesheet" href="..\..\style\katex.css">
</head>
<body><nav class="header-nav"><div class="max-container"><a class="logo" href="..\..\index.html"><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" height="1em" width="1em">
  <path d="m21.66 10.44-.98 4.18c-.84 3.61-2.5 5.07-5.62 4.77-.5-.04-1.04-.13-1.62-.27l-1.68-.4c-4.17-.99-5.46-3.05-4.48-7.23l.98-4.19c.2-.85.44-1.59.74-2.2 1.17-2.42 3.16-3.07 6.5-2.28l1.67.39c4.19.98 5.47 3.05 4.49 7.23Z" fill="#c9d1d9"></path>
  <path d="M15.06 19.39c-.62.42-1.4.77-2.35 1.08l-1.58.52c-3.97 1.28-6.06.21-7.35-3.76L2.5 13.28c-1.28-3.97-.22-6.07 3.75-7.35l1.58-.52c.41-.13.8-.24 1.17-.31-.3.61-.54 1.35-.74 2.2l-.98 4.19c-.98 4.18.31 6.24 4.48 7.23l1.68.4c.58.14 1.12.23 1.62.27Zm2.43-8.88c-.06 0-.12-.01-.19-.02l-4.85-1.23a.75.75 0 0 1 .37-1.45l4.85 1.23a.748.748 0 0 1-.18 1.47Z" fill="#228e6c"></path>
  <path d="M14.56 13.89c-.06 0-.12-.01-.19-.02l-2.91-.74a.75.75 0 0 1 .37-1.45l2.91.74c.4.1.64.51.54.91-.08.34-.38.56-.72.56Z" fill="#228e6c"></path>
</svg>
<span class="title">Quick Reference</span></a><div class="menu"><a href="javascript:void(0);" class="searchbtn" id="searchbtn"><svg xmlns="http://www.w3.org/2000/svg" height="1em" width="1em" viewBox="0 0 18 18">
  <path fill="currentColor" d="M17.71,16.29 L14.31,12.9 C15.4069846,11.5024547 16.0022094,9.77665502 16,8 C16,3.581722 12.418278,0 8,0 C3.581722,0 0,3.581722 0,8 C0,12.418278 3.581722,16 8,16 C9.77665502,16.0022094 11.5024547,15.4069846 12.9,14.31 L16.29,17.71 C16.4777666,17.8993127 16.7333625,18.0057983 17,18.0057983 C17.2666375,18.0057983 17.5222334,17.8993127 17.71,17.71 C17.8993127,17.5222334 18.0057983,17.2666375 18.0057983,17 C18.0057983,16.7333625 17.8993127,16.4777666 17.71,16.29 Z M2,8 C2,4.6862915 4.6862915,2 8,2 C11.3137085,2 14,4.6862915 14,8 C14,11.3137085 11.3137085,14 8,14 C4.6862915,14 2,11.3137085 2,8 Z"></path>
</svg><span>搜索</span><span>⌘K</span></a><button id="darkMode" type="button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="light" height="1em" width="1em">
  <path d="M6.995 12c0 2.761 2.246 5.007 5.007 5.007s5.007-2.246 5.007-5.007-2.246-5.007-5.007-5.007S6.995 9.239 6.995 12zM11 19h2v3h-2zm0-17h2v3h-2zm-9 9h3v2H2zm17 0h3v2h-3zM5.637 19.778l-1.414-1.414 2.121-2.121 1.414 1.414zM16.242 6.344l2.122-2.122 1.414 1.414-2.122 2.122zM6.344 7.759 4.223 5.637l1.415-1.414 2.12 2.122zm13.434 10.605-1.414 1.414-2.122-2.122 1.414-1.414z"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" class="dark" height="1em" width="1em">
  <path d="M12 11.807A9.002 9.002 0 0 1 10.049 2a9.942 9.942 0 0 0-5.12 2.735c-3.905 3.905-3.905 10.237 0 14.142 3.906 3.906 10.237 3.905 14.143 0a9.946 9.946 0 0 0 2.735-5.119A9.003 9.003 0 0 1 12 11.807z"></path>
</svg>
</button><script src="..\../js/dark.js?v=0.2.17"></script><a href="https://github.com/yacshy/yacshy.github.io" class="" target="__blank"><svg viewBox="0 0 16 16" fill="currentColor" height="1em" width="1em"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg></a></div></div></nav><div class="wrap h1body-exist max-container"><header class="wrap-header h1wrap"><h1 id="quick-reference-cheatsheet"><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" height="1em" width="1em">
  <path d="m21.66 10.44-.98 4.18c-.84 3.61-2.5 5.07-5.62 4.77-.5-.04-1.04-.13-1.62-.27l-1.68-.4c-4.17-.99-5.46-3.05-4.48-7.23l.98-4.19c.2-.85.44-1.59.74-2.2 1.17-2.42 3.16-3.07 6.5-2.28l1.67.39c4.19.98 5.47 3.05 4.49 7.23Z" fill="#c9d1d9"></path>
  <path d="M15.06 19.39c-.62.42-1.4.77-2.35 1.08l-1.58.52c-3.97 1.28-6.06.21-7.35-3.76L2.5 13.28c-1.28-3.97-.22-6.07 3.75-7.35l1.58-.52c.41-.13.8-.24 1.17-.31-.3.61-.54 1.35-.74 2.2l-.98 4.19c-.98 4.18.31 6.24 4.48 7.23l1.68.4c.58.14 1.12.23 1.62.27Zm2.43-8.88c-.06 0-.12-.01-.19-.02l-4.85-1.23a.75.75 0 0 1 .37-1.45l4.85 1.23a.748.748 0 0 1-.18 1.47Z" fill="#228e6c"></path>
  <path d="M14.56 13.89c-.06 0-.12-.01-.19-.02l-2.91-.74a.75.75 0 0 1 .37-1.45l2.91.74c.4.1.64.51.54.91-.08.34-.38.56-.72.56Z" fill="#228e6c"></path>
</svg>
<a aria-hidden="true" tabindex="-1" href="#quick-reference-cheatsheet"><span class="icon icon-link"></span></a>Quick Reference Cheatsheet</h1><div class="wrap-body">
<p><a href="https://github.com/jaywcjlove/refs-cli/actions/workflows/ci.yml"><img src="https://github.com/jaywcjlove/refs-cli/actions/workflows/ci.yml/badge.svg" alt="CI"></a>
<a href="https://www.npmjs.com/package/refs-cli"><img src="https://img.shields.io/npm/v/refs-cli.svg?style=flat" alt="NPM version"></a>
<a href="https://www.npmjs.com/package/refs-cli"><img src="https://img.shields.io/npm/dm/refs-cli.svg?style=flat" alt="Downloads"></a>
<a href="https://github.com/jaywcjlove/refs-cli/network/dependents"><img src="https://badgen.net/github/dependents-repo/jaywcjlove/refs-cli" alt="Repo Dependents"></a>
<a href="https://github.com/jaywcjlove/refs-cli"><img src="https://badgen.net/badge/icon/Github?icon=github&#x26;label" alt="Github repo"></a></p>
<p style="padding-top: 12px;">Here's a style reference you can use on your <strong>Quick Reference</strong> cheat sheet!</p>
<!--rehype:style=padding-top: 12px;-->
</div></header><div class="menu-tocs"><div class="menu-btn"><svg aria-hidden="true" fill="currentColor" height="1em" width="1em" viewBox="0 0 16 16" version="1.1" data-view-component="true">
  <path fill-rule="evenodd" d="M2 4a1 1 0 100-2 1 1 0 000 2zm3.75-1.5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zm0 5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zm0 5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zM3 8a1 1 0 11-2 0 1 1 0 012 0zm-1 6a1 1 0 100-2 1 1 0 000 2z"></path>
</svg></div><div class="menu-modal"><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#getting-started">Getting Started</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#local-compilation-preview">Local compilation preview</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#clone-repository">Clone repository</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#install-dependencies-to-generate-html-pages">Install dependencies to generate HTML pages</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#directory-structure">Directory Structure</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#add-a-checklist">Add a checklist</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#home-navigation">Home Navigation</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#home-prompt-configuration">Home prompt configuration</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#command-help">Command Help</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#config">Config</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#toml-config-example">TOML config example:</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#support-for-more-config-loading">Support for more config loading</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#environment-variable">Environment Variable</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#markdown-comments-syntax">Markdown Comments Syntax</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#introduce">Introduce</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#an-introduction-to-annotation-syntax">An introduction to annotation syntax</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#syntax">Syntax</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#example">Example</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#example-three-placeholders-title-red">Example, three placeholders, title red</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#parameter-description">Parameter Description</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#text-color">Text Color</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#font-size">Font Size</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#forced-line-break">Forced line break</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#show-table-header">Show table header</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#code-line-highlighting">Code line highlighting</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#tooltips">Tooltips</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#h3-section-card-background-color">H3 section (card) background color</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#red-title">Red title</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#shortcut-key-style">Shortcut key style</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#code-line-number">Code line number</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#built-in-class-style">Built-in class style</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#color-element">Color Element</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#html-code-preview">HTML code preview</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#hide-card-title">Hide card title</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#注释类配置">注释类配置</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#katex-数学渲染">KaTeX 数学渲染</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#布局">布局</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#h2-部分">H2 部分</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#占位布局-style-写法">占位布局 style 写法</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#卡片栏布局-style-写法">卡片栏布局 style 写法</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#h3-部分">H3 部分</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#卡片合并行布局-1">卡片合并行布局 1</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#卡片列合并布局-2">卡片列合并布局 2</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#卡片列合并布局-3">卡片列合并布局 3</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#卡片列合并布局-4">卡片列合并布局 4</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#卡片列合并布局-5">卡片列合并布局 5</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#卡片列合并布局-6">卡片列合并布局 6</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#卡片列合并布局-7">卡片列合并布局 7</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#卡片列合并布局-8">卡片列合并布局 8</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#卡片列合并布局-9">卡片列合并布局 9</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#表格">表格</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#基本表格">基本表格</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#date">Date</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#time">Time</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#快捷键">快捷键</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#展示标题">展示标题</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#列表样式展示表格">列表样式展示表格</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#列表圆圈样式展示表格">列表圆圈样式展示表格</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#列表实心圆圈样式展示表格">列表实心圆圈样式展示表格</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#列表方形展示表格">列表方形展示表格</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#列表实心方形展示表格">列表实心方形展示表格</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#列表箭头样式展示表格">列表箭头样式展示表格</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#隐藏表头强制小尺寸自动换行">隐藏表头强制小尺寸自动换行</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#表格末尾列左对齐">表格末尾列左对齐</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#强制-code-不换行">强制 code 不换行</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#列表">列表</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#一栏默认">一栏(默认)</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#四列">四列</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#列表步骤">列表步骤</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#没有标记">没有标记</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#圆圈标记">圆圈标记</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#箭头标记">箭头标记</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#h2-部分---5列效果展示">H2 部分 - 5列效果展示</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#one">One</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#two">Two</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#three">Three</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#four">Four</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#five">Five</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#h3-部分---占位效果展示">H3 部分 - 占位效果展示</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#row-span-2">row-span-2</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#col-span-2">col-span-2</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#红色标题">红色标题</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#黄色标题">黄色标题</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#col-span-3">col-span-3</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#card-child">Card child</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#h4-subheading">H4 subheading</a><a aria-hidden="true" class="leve4 tocs-link" data-num="4" href="#h4-subheading-1">H4 subheading</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#h3-部分-1">H3 部分</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#h3-部分背景颜色">H3 部分背景颜色</a></div></div><div class="h1wrap-body"><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="getting-started"><a aria-hidden="true" tabindex="-1" href="#getting-started"><span class="icon icon-link"></span></a>Getting Started</h2><div class="wrap-body">
</div></div><div class="h2wrap-body"><div class="wrap h3body-exist"><div class="wrap-header h3wrap"><h3 id="local-compilation-preview"><a aria-hidden="true" tabindex="-1" href="#local-compilation-preview"><span class="icon icon-link"></span></a>Local compilation preview</h3><div class="wrap-body">
<p>Clone the repository to the local debug page. See the <a href="https://github.com/jaywcjlove/reference/blob/main/CONTRIBUTING.md">Contributing Guide</a> for how to get started.</p>
<h4 id="clone-repository"><a aria-hidden="true" tabindex="-1" href="#clone-repository"><span class="icon icon-link"></span></a>Clone repository</h4>
<pre class="wrap-text "><code class="language-shell code-highlight"><span class="code-line"><span class="token function">git</span> clone git@github.com:jaywcjlove/reference.git
</span></code></pre>
<!--rehype:className=wrap-text -->
<h4 id="install-dependencies-to-generate-html-pages"><a aria-hidden="true" tabindex="-1" href="#install-dependencies-to-generate-html-pages"><span class="icon icon-link"></span></a>Install dependencies to generate HTML pages</h4>
<pre class="language-shell"><code class="language-shell code-highlight"><span class="code-line"><span class="token function">npm</span> i         <span class="token comment"># install dependencies</span>
</span><span class="code-line"><span class="token function">npm</span> run build <span class="token comment"># Compile output HTML</span>
</span></code></pre>
<p>The HTML is stored in the <code>dist</code> directory under the root directory of the warehouse, and the <code>dist/index.html</code> static page is opened in the browser for preview.</p>
<pre class="language-shell"><code class="language-shell code-highlight"><span class="code-line"><span class="token comment"># Listen to the md file to compile and output HTML</span>
</span><span class="code-line"><span class="token function">npm</span> run start
</span></code></pre>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="directory-structure"><a aria-hidden="true" tabindex="-1" href="#directory-structure"><span class="icon icon-link"></span></a>Directory Structure</h3><div class="wrap-body">
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line"><span class="token builtin class-name">.</span>
</span><span class="code-line">├── CONTRIBUTING.md   <span class="token comment"># Contribution Note</span>
</span><span class="code-line">├── Dockerfile
</span><span class="code-line">├── LICENSE
</span><span class="code-line">├── README.md  <span class="token comment"># 🌐 Home content</span>
</span><span class="code-line">├── dist <span class="token comment"># 📦 Compiled static resource directory</span>
</span><span class="code-line">├── docs <span class="token comment"># 👈 Markdown Documentation (cheatsheet)</span>
</span><span class="code-line">│   ├── bash.md
</span><span class="code-line">│   ├── <span class="token punctuation">..</span><span class="token punctuation">..</span>
</span><span class="code-line">│   └── yaml.md
</span><span class="code-line">├── package.json
</span><span class="code-line">├── .refsrc.json <span class="token comment"># refs configuration</span>
</span><span class="code-line">└── assets  <span class="token comment"># LOGO icon file resource</span>
</span></code></pre>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="add-a-checklist"><a aria-hidden="true" tabindex="-1" href="#add-a-checklist"><span class="icon icon-link"></span></a>Add a checklist</h3><div class="wrap-body">
<p>A simple checklist contains <code>page headline &#x3C;h1></code>, <code>introduction</code> text placed below the headline, <code>&#x3C;h2></code> category headings, <code>&#x3C;h3></code> content for <code>cards</code></p>
<pre class="wrap-text"><code class="language-markdown code-highlight"><span class="code-line"><span class="token title important">Cheatsheet (page title)
</span></span><span class="code-line"><span class="token title important"><span class="token punctuation">===</span></span>
</span><span class="code-line">
</span><span class="code-line">Here's a style reference you can use on your current listing! Cheat Sheet Introduction
</span><span class="code-line">
</span><span class="code-line"><span class="token title important">Getting Started (Category Title)
</span></span><span class="code-line"><span class="token title important"><span class="token punctuation">---</span></span>
</span><span class="code-line">
</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Introduction (card)</span>
</span><span class="code-line">
</span><span class="code-line">card content
</span></code></pre>
<!--rehype:className=wrap-text-->
<p>The above markdown content is stored in the <code>docs</code> directory, named <code>xxx.md</code></p>
</div></div></div><div class="wrap h3body-not-exist col-span-2"><div class="wrap-header h3wrap"><h3 id="home-navigation"><a aria-hidden="true" tabindex="-1" href="#home-navigation"><span class="icon icon-link"></span></a>Home Navigation</h3><div class="wrap-body">
<!--rehype:wrap-class=col-span-2-->
<p>The homepage (<code>README.md</code>) is stored in the root directory of the warehouse, and the homepage navigation is automatically generated through this <code>README.md</code>. The following is a navigation example:</p>
<pre class="language-markdown"><code class="language-markdown code-highlight"><span class="code-line"><span class="token title important"><span class="token punctuation">##</span> Linux commands</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token url">[<span class="token content">Cron</span>](<span class="token url">./docs/cron.md</span>)</span><span class="token comment">&#x3C;!--rehype:style=background: rgb(239 68 68/var(\-\-bg\-opacity));--></span>
</span><span class="code-line"><span class="token comment">&#x3C;!--rehype:class=home-card--></span>
</span></code></pre>
<p>The home navigation icon is stored in the <code>scripts/assets</code> directory. If your cheat list is defined as <code>docs/cron.md</code>, then your icon is defined as <code>cron.svg</code> and stored in the <code>scripts/assets</code> directory , recompile the home page when the row menu has icons.</p>
<ul>
<li>Icons are stored in the <a href="https://github.com/jaywcjlove/reference/blob/main/scripts/assets"><code>scripts/assets</code></a> directory</li>
<li>The name of the image is consistent with the name of the manifest <code>cron.md</code> -> <code>cron.svg</code> (note capitalization)</li>
<li>SVG icon size <code>&#x3C;svg height="1em" width="1em"</code></li>
<li>SVG icon color uses inherited color value <code>&#x3C;svg fill="currentColor"</code></li>
<li>Use <code>&#x3C;!--rehype:class=home-card--></code> to identify the card style</li>
</ul>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="home-prompt-configuration"><a aria-hidden="true" tabindex="-1" href="#home-prompt-configuration"><span class="icon icon-link"></span></a>Home prompt configuration</h3><div class="wrap-body">
<pre class="wrap-text"><code class="language-markdown code-highlight"><span class="code-line"><span class="token url">[<span class="token content">Django</span>](<span class="token url">./docs/djiango.md</span>)</span><span class="token comment">&#x3C;!--rehype:style=background: rgb(12 75 51/var(\-\-bg\-opacity));&#x26;class=contributing--></span>
</span></code></pre>
<!--rehype:className=wrap-text-->
<p>Add <code>contributing</code> class name, it will add <code>👆needs your participation to be perfected</code> by default at the bottom of the card</p>
<pre class="language-markdown"><code class="language-markdown code-highlight"><span class="code-line">class=tag&#x26;data-info=👆See what's missing?
</span></code></pre>
<p>The above example changes the default prompt to:<code>👆See what's missing?</code></p>
<pre class="wrap-text"><code class="language-markdown code-highlight"><span class="code-line"><span class="token url">[<span class="token content">Django</span>](<span class="token url">./docs/djiango.md</span>)</span><span class="token comment">&#x3C;!--rehype:style=background: rgb(12 75 51/var(\-\-bg\-opacity));&#x26;class=tag&#x26;data-lang=Python--></span>
</span></code></pre>
<!--rehype:className=wrap-text-->
<p>Add <code>class=tag&#x26;data-lang=Python</code> class name and parameters, it will be marked <em><code>Python</code></em> in the upper right corner of the card</p>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="command-help"><a aria-hidden="true" tabindex="-1" href="#command-help"><span class="icon icon-link"></span></a>Command Help</h3><div class="wrap-body">
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line">Usage: refs-cli <span class="token punctuation">[</span>output-dir<span class="token punctuation">]</span> <span class="token punctuation">[</span>--help<span class="token operator">|</span>h<span class="token punctuation">]</span>
</span><span class="code-line">
</span><span class="code-line">  Displays <span class="token builtin class-name">help</span> information.
</span><span class="code-line">
</span><span class="code-line">Options:
</span><span class="code-line">
</span><span class="code-line">  --version, <span class="token parameter variable">-v</span>   Show version number
</span><span class="code-line">  --help, <span class="token parameter variable">-h</span>      Displays <span class="token builtin class-name">help</span> information.
</span><span class="code-line">  --watch, <span class="token parameter variable">-w</span>     Watch and compile Markdown files.
</span><span class="code-line">  --output, <span class="token parameter variable">-o</span>    Output directory. defalut<span class="token punctuation">(</span>dist<span class="token punctuation">)</span>
</span><span class="code-line">  --force, <span class="token parameter variable">-f</span>     Force <span class="token function">file</span> regeneration.
</span><span class="code-line">
</span><span class="code-line">Example:
</span><span class="code-line">
</span><span class="code-line">  $ npx refs-cli
</span><span class="code-line">  $ refs-cli <span class="token parameter variable">--watch</span>
</span><span class="code-line">  $ refs-cli <span class="token parameter variable">--output</span> website
</span><span class="code-line">  $ refs-cli
</span><span class="code-line">
</span><span class="code-line">refs-cli@v0.0.1
</span></code></pre>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="config"><a aria-hidden="true" tabindex="-1" href="#config"><span class="icon icon-link"></span></a>Config</h3><div class="wrap-body">
<p>Store <code>.refsrc.json</code> in the root directory of the project</p>
<pre class="language-json"><code class="language-json code-highlight"><span class="code-line"><span class="token punctuation">{</span>
</span><span class="code-line">  <span class="token property">"title"</span><span class="token operator">:</span> <span class="token string">"Quick Reference"</span><span class="token punctuation">,</span>
</span><span class="code-line">  <span class="token property">"description"</span><span class="token operator">:</span> <span class="token string">"{{description}}. Sharing Quick Reference Cheat Sheets for Developers"</span><span class="token punctuation">,</span>
</span><span class="code-line">  <span class="token property">"keywords"</span><span class="token operator">:</span> <span class="token string">"reference-cli,reference,refs-cli,refs,cli"</span><span class="token punctuation">,</span>
</span><span class="code-line">  <span class="token property">"data-info"</span><span class="token operator">:</span> <span class="token string">"👆👆need your participation"</span><span class="token punctuation">,</span>
</span><span class="code-line">  <span class="token property">"search"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
</span><span class="code-line">    <span class="token property">"label"</span><span class="token operator">:</span> <span class="token string">"Search"</span><span class="token punctuation">,</span>
</span><span class="code-line">    <span class="token property">"placeholder"</span><span class="token operator">:</span> <span class="token string">"Search for cheatsheet"</span><span class="token punctuation">,</span>
</span><span class="code-line">    <span class="token property">"cancel"</span><span class="token operator">:</span> <span class="token string">"Cancel"</span>
</span><span class="code-line">  <span class="token punctuation">}</span><span class="token punctuation">,</span>
</span><span class="code-line">  <span class="token property">"editor"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
</span><span class="code-line">    <span class="token property">"label"</span><span class="token operator">:</span> <span class="token string">"Edit"</span>
</span><span class="code-line">  <span class="token punctuation">}</span><span class="token punctuation">,</span>
</span><span class="code-line">  <span class="token property">"github"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
</span><span class="code-line">    <span class="token property">"url"</span><span class="token operator">:</span> <span class="token string">"https://github.com/jaywcjlove/refs-cli"</span>
</span><span class="code-line">  <span class="token punctuation">}</span><span class="token punctuation">,</span>
</span><span class="code-line">  <span class="token property">"home"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
</span><span class="code-line">    <span class="token property">"label"</span><span class="token operator">:</span> <span class="token string">"Home"</span><span class="token punctuation">,</span>
</span><span class="code-line">    <span class="token property">"url"</span><span class="token operator">:</span> <span class="token string">"https://jaywcjlove.github.io/refs-cli"</span>
</span><span class="code-line">  <span class="token punctuation">}</span><span class="token punctuation">,</span>
</span><span class="code-line">  <span class="token property">"footer"</span><span class="token operator">:</span> <span class="token string">"&#x3C;br />备案号：&#x3C;a href=\"#\">沪ICP备202200000号-1&#x3C;/a>"</span><span class="token punctuation">,</span>
</span><span class="code-line">  <span class="token property">"license"</span><span class="token operator">:</span> <span class="token string">"Support for HTML strings"</span><span class="token punctuation">,</span>
</span><span class="code-line">  <span class="token property">"analyticsId"</span><span class="token operator">:</span> <span class="token string">"G-9MWEWXSDQK"</span>
</span><span class="code-line"><span class="token punctuation">}</span>
</span></code></pre>
<p>Support <a href="https://www.json.org">JSON</a>, <a href="https://github.com/microsoft/node-jsonc-parser">JSONC</a>, <a href="https://json5.org/">JSON5</a>, <a href="https://yaml.org/">YAML</a>, <a href="https://toml.io">TOML</a>, <a href="https://en.wikipedia.org/wiki/INI_file">INI</a>, <a href="http://www.commonjs.org">CJS</a>, <a href="https://www.typescriptlang.org/">Typescript</a>, and ESM config load.</p>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="toml-config-example"><a aria-hidden="true" tabindex="-1" href="#toml-config-example"><span class="icon icon-link"></span></a><code>TOML</code> config example:</h3><div class="wrap-body">
<pre class="language-toml"><code class="language-toml code-highlight"><span class="code-line"><span class="token key property">title</span> <span class="token punctuation">=</span> <span class="token string">"Refs CLI"</span>
</span><span class="code-line"><span class="token key property">description</span> <span class="token punctuation">=</span> <span class="token string">"{{description}}. Sharing Quick Reference Cheat Sheets for Developers"</span>
</span><span class="code-line"><span class="token key property">keywords</span> <span class="token punctuation">=</span> <span class="token string">"reference-cli,reference,refs-cli,refs,cli"</span>
</span><span class="code-line"><span class="token key property">data-info</span> <span class="token punctuation">=</span> <span class="token string">"👆👆need your participation"</span>
</span><span class="code-line"><span class="token punctuation">[</span><span class="token table class-name">search</span><span class="token punctuation">]</span>
</span><span class="code-line">  <span class="token key property">label</span> <span class="token punctuation">=</span> <span class="token string">"Search"</span>
</span><span class="code-line">  <span class="token key property">placeholder</span> <span class="token punctuation">=</span> <span class="token string">"Search for cheatsheet"</span>
</span><span class="code-line">  <span class="token key property">cancel</span> <span class="token punctuation">=</span> <span class="token string">"Cancel"</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token punctuation">[</span><span class="token table class-name">editor</span><span class="token punctuation">]</span>
</span><span class="code-line">  <span class="token key property">label</span> <span class="token punctuation">=</span> <span class="token string">"Edit"</span>
</span><span class="code-line"><span class="token punctuation">[</span><span class="token table class-name">github</span><span class="token punctuation">]</span>
</span><span class="code-line">  <span class="token key property">url</span> <span class="token punctuation">=</span> <span class="token string">"https://github.com/jaywcjlove/refs-cli"</span>
</span><span class="code-line"><span class="token punctuation">[</span><span class="token table class-name">home</span><span class="token punctuation">]</span>
</span><span class="code-line">  <span class="token key property">label</span> <span class="token punctuation">=</span> <span class="token string">"Home"</span>
</span><span class="code-line">  <span class="token key property">url</span> <span class="token punctuation">=</span> <span class="token string">"https://jaywcjlove.github.io/refs-cli"</span>
</span></code></pre>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="support-for-more-config-loading"><a aria-hidden="true" tabindex="-1" href="#support-for-more-config-loading"><span class="icon icon-link"></span></a>Support for more config loading</h3><div class="wrap-body">
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line">.refsrc                .refsrc.json
</span><span class="code-line">.refsrc.json5          .refsrc.jsonc
</span><span class="code-line">.refsrc.yaml           .refsrc.yml
</span><span class="code-line">.refsrc.toml           .refsrc.ini
</span><span class="code-line">.refsrc.js             .refsrc.ts
</span><span class="code-line">.refsrc.cjs            .refsrc.mjs
</span><span class="code-line">.config/refsrc         .config/refsrc.json
</span><span class="code-line">.config/refsrc.json5   .config/refsrc.jsonc
</span><span class="code-line">.config/refsrc.yaml    .config/refsrc.yml
</span><span class="code-line">.config/refsrc.toml    .config/refsrc.ini
</span><span class="code-line">.config/refsrc.js      .config/refsrc.ts
</span><span class="code-line">.config/refsrc.cjs     .config/refsrc.mjs
</span><span class="code-line">refs.config.js         refs.config.ts
</span><span class="code-line">refs.config.cjs        refs.config.mjs
</span></code></pre>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="environment-variable"><a aria-hidden="true" tabindex="-1" href="#environment-variable"><span class="icon icon-link"></span></a>Environment Variable</h3><div class="wrap-body">
<p>Custom navigation menu</p>
<pre class="language-ini"><code class="language-ini code-highlight"><span class="code-line"><span class="token key attr-name">REF_URL</span><span class="token punctuation">=</span><span class="token value attr-value">http://ref.ecdata.cn/</span>
</span><span class="code-line"><span class="token key attr-name">REF_LABEL</span><span class="token punctuation">=</span><span class="token value attr-value">网站首页</span>
</span></code></pre>
<p>Footer added (Support for HTML strings)</p>
<pre class="wrap-text"><code class="language-ini code-highlight"><span class="code-line"><span class="token key attr-name">REF_FOOTER</span><span class="token punctuation">=</span> <span class="token value attr-value">&#x3C;br/>备案号：沪ICP备20220000000号-1</span>
</span></code></pre>
<!--rehype:className=wrap-text-->
<p>Modify copyright information (HTML strings are supported)</p>
<pre class="wrap-text"><code class="language-ini code-highlight"><span class="code-line"><span class="token key attr-name">LICENSE</span><span class="token punctuation">=</span><span class="token value attr-value">Copyright (c) &#x3C;b>2022&#x3C;/b> Support for HTML strings</span>
</span></code></pre>
<!--rehype:className=wrap-text-->
<p>Create <code>.env</code> file in project root directory.</p>
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="markdown-comments-syntax"><a aria-hidden="true" tabindex="-1" href="#markdown-comments-syntax"><span class="icon icon-link"></span></a>Markdown Comments Syntax</h2><div class="wrap-body">
</div></div><div class="h2wrap-body"><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="introduce"><a aria-hidden="true" tabindex="-1" href="#introduce"><span class="icon icon-link"></span></a>Introduce</h3><div class="wrap-body">
<!--rehype:wrap-class=row-span-2-->
<p>The <code>HTML comment syntax</code> is used in the cheat list to identify the website layout and some styles, the purpose is to preview normally and flawlessly in <code>GitHub</code> <a href="./markdown.html"><code>Markdown</code></a>.</p>
<pre class="wrap-text"><code class="language-markdown code-highlight"><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Card Title</span>
</span><span class="code-line"><span class="token comment">&#x3C;!--rehype:wrap-class=col-span-2--></span>
</span><span class="code-line">
</span><span class="code-line">Card Markdown content display, the following comment syntax changes the style for the text content
</span><span class="code-line"><span class="token comment">&#x3C;!--rehype:style=color: red;--></span>
</span></code></pre>
<!--rehype:className=wrap-text-->
<p>The basic example above uses the <code>col-span-2</code> class logo, and the card occupies the <code>2</code> column position. It is a good habit to refer to the source code of the existing cheat list!</p>
</div></div></div><div class="wrap h3body-exist row-span-4"><div class="wrap-header h3wrap"><h3 style="color:black;background-color: #d7a100;" id="an-introduction-to-annotation-syntax"><a aria-hidden="true" tabindex="-1" href="#an-introduction-to-annotation-syntax"><span class="icon icon-link"></span></a>An introduction to annotation syntax</h3><div class="wrap-body">
<!--rehype:wrap-class=row-span-4&style=color:black;background-color: #d7a100;-->
<ul>
<li>Add HTML comments below or after a <a href="./markdown.html"><code>Markdown</code></a> syntax</li>
<li>Start with <code>&#x3C;!--rehype:</code>, end with <code>--></code>, wrap the parameter content</li>
<li>The content adopts the character splicing method of the URL parameter</li>
</ul>
<h4 id="syntax"><a aria-hidden="true" tabindex="-1" href="#syntax"><span class="icon icon-link"></span></a>Syntax</h4>
<p><code>&#x3C;!--rehype:</code> <em>+</em> <code>key=value</code> <em>+</em> <strong><code>&#x26;</code></strong> <em>+</em> <code>key=value</code> <em>+</em> <code>--></code><br>
<code>Mark Start</code> + <code>parameter:value</code> + <code>Delimiter(&#x26;)</code> + <code>parameter:value</code>  + <code>Mark End</code></p>
<h4 id="example"><a aria-hidden="true" tabindex="-1" href="#example"><span class="icon icon-link"></span></a>Example</h4>
<pre class="language-markdown"><code class="language-markdown code-highlight"><span class="code-line"><span class="token title important"><span class="token punctuation">##</span> Section H2</span>
</span><span class="code-line"><span class="token comment">&#x3C;!--rehype:body-class=cols-2--></span>
</span><span class="code-line">
</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Section H3</span>
</span><span class="code-line"><span class="token comment">&#x3C;!--rehype:wrap-class=row-span-2--></span>
</span></code></pre>
<h4 id="example-three-placeholders-title-red"><a aria-hidden="true" tabindex="-1" href="#example-three-placeholders-title-red"><span class="icon icon-link"></span></a>Example, three placeholders, title red</h4>
<pre class="wrap-text"><code class="language-markdown code-highlight"><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Title</span>
</span><span class="code-line"><span class="token comment">&#x3C;!--rehype:wrap-class=row-span-3&#x26;style=color:red;--></span>
</span></code></pre>
<!--rehype:className=wrap-text-->
<h4 id="parameter-description"><a aria-hidden="true" tabindex="-1" href="#parameter-description"><span class="icon icon-link"></span></a>Parameter Description</h4>

























<table class="left-align show-header"><thead><tr><th>className</th><th>description</th></tr></thead><tbody><tr><td><code>body-style</code></td><td>Wraps all card <code>Warpper</code> styles</td></tr><tr><td><code>body-class</code></td><td>For card bar layout, add <code>class</code> name</td></tr><tr><td><code>wrap-style</code></td><td>Add <a href="./css.html">CSS</a> style to card bar</td></tr><tr><td><code>wrap-class</code></td><td>For card placeholder, add <code>class</code> name</td></tr></tbody></table>
<!--rehype:className=left-align show-header-->
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="text-color"><a aria-hidden="true" tabindex="-1" href="#text-color"><span class="icon icon-link"></span></a>Text Color</h3><div class="wrap-body">
<pre class="language-markdown"><code class="language-markdown code-highlight"><span class="code-line"><span class="token italic"><span class="token punctuation">_</span><span class="token content">I am red</span><span class="token punctuation">_</span></span><span class="token comment">&#x3C;!--rehype:style=color: red;--></span>
</span><span class="code-line"><span class="token bold"><span class="token punctuation">**</span><span class="token content">bold red</span><span class="token punctuation">**</span></span><span class="token comment">&#x3C;!--rehype:style=color: red;--></span>
</span></code></pre>
<p>Add a comment style above, the text <em style="color: red;">I am red</em><!--rehype:style=color: red;--> the text becomes <code>red</code></p>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="font-size"><a aria-hidden="true" tabindex="-1" href="#font-size"><span class="icon icon-link"></span></a>Font Size</h3><div class="wrap-body">
<pre class="wrap-text"><code class="language-markdown code-highlight"><span class="code-line"><span class="token bold"><span class="token punctuation">**</span><span class="token content">bold red</span><span class="token punctuation">**</span></span>
</span><span class="code-line"><span class="token comment">&#x3C;!--rehype:style=color: red;font-size: 18px--></span>
</span></code></pre>
<!--rehype:className=wrap-text-->
<p>Add a comment style above, the text <em style="color: red;font-size: 18px">bold becomes bigger red</em><!--rehype:style=color: red;font-size: 18px--> becomes <code>red</code> and <code>big</code></p>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="forced-line-break"><a aria-hidden="true" tabindex="-1" href="#forced-line-break"><span class="icon icon-link"></span></a>Forced line break</h3><div class="wrap-body">
<pre class="language-markdown"><code class="language-markdown code-highlight"><span class="code-line">\```js
</span><span class="code-line">function () {}
</span><span class="code-line">\```
</span><span class="code-line"><span class="token comment">&#x3C;!--rehype:className=wrap-text--></span>
</span></code></pre>
<p>If the content of the code block is too long, use the forced line break class (<code>wrap-text</code>) to solve</p>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="show-table-header"><a aria-hidden="true" tabindex="-1" href="#show-table-header"><span class="icon icon-link"></span></a>Show table header</h3><div class="wrap-body">
<pre class="language-markdown"><code class="language-markdown code-highlight"><span class="code-line">Key   | value
</span><span class="code-line">:---- | --
</span><span class="code-line"><span class="token code-snippet code keyword">`Key`</span> | value
</span><span class="code-line"><span class="token comment">&#x3C;!--rehype:className=show-header--></span>
</span></code></pre>
<p>The annotation configuration adds the <code>show-header</code> class, placed under the table, the header will be displayed.</p>
</div></div></div><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="code-line-highlighting"><a aria-hidden="true" tabindex="-1" href="#code-line-highlighting"><span class="icon icon-link"></span></a>Code line highlighting</h3><div class="wrap-body">
<!--rehype:wrap-class=row-span-2-->
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line highlight-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">React</span></span> <span class="token keyword module">from</span> <span class="token string">"react"</span><span class="token punctuation">;</span>
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token string">"./Student.css"</span><span class="token punctuation">;</span>
</span><span class="code-line">
</span><span class="code-line highlight-line"><span class="token keyword module">export</span> <span class="token keyword">const</span> <span class="token maybe-class-name">Student</span> <span class="token operator">=</span> <span class="token punctuation">(</span>
</span><span class="code-line highlight-line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Student<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>div</span><span class="token punctuation">></span></span>
</span><span class="code-line"><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></code></pre>
<p>The lines above <code>{1,4-5}</code> are highlighted, and the following is <a href="./markdown.html"><code>Markdown</code></a> code example</p>
<pre class="language-markdown"><code class="language-markdown code-highlight"><span class="code-line">  ```jsx {1,4-5}
</span></code></pre>
<p>Code line highlighting can be used together with code line numbers.</p>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="tooltips"><a aria-hidden="true" tabindex="-1" href="#tooltips"><span class="icon icon-link"></span></a>Tooltips</h3><div class="wrap-body">
<blockquote>
<p><a href="https://github.com/jaywcjlove/reference" class="tooltip">When the mouse moves over it, there is a hint<em class="tooltiptext">Tip content of Tooltips</em></a></p>
</blockquote>
<p>Add annotation configuration <code>&#x3C;!--rehype:tooltips--></code> to add a Tooltips hint.</p>
</div></div></div><div class="wrap h3body-not-exist" style="background: #8dffd42e;"><div class="wrap-header h3wrap"><h3 id="h3-section-card-background-color"><a aria-hidden="true" tabindex="-1" href="#h3-section-card-background-color"><span class="icon icon-link"></span></a>H3 section (card) background color</h3><div class="wrap-body">
<!--rehype:wrap-style=background: #8dffd42e;-->
<pre class="wrap-text "><code class="language-markdown code-highlight"><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> H3 section (card) background color</span>
</span><span class="code-line"><span class="token comment">&#x3C;!--rehype:wrap-style=background: #8dffd42e;--></span>
</span></code></pre>
<!--rehype:className=wrap-text -->
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 style="background:#e91e63;" id="red-title"><a aria-hidden="true" tabindex="-1" href="#red-title"><span class="icon icon-link"></span></a>Red title</h3><div class="wrap-body">
<!--rehype:style=background:#e91e63;-->
<pre class="language-markdown"><code class="language-markdown code-highlight"><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Red title</span>
</span><span class="code-line"><span class="token comment">&#x3C;!--rehype:style=background:#e91e63;--></span>
</span></code></pre>
<p>Add a style annotation <code>&#x3C;!--rehype:style=background:#e91e63;--></code> below the H3 heading</p>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="shortcut-key-style"><a aria-hidden="true" tabindex="-1" href="#shortcut-key-style"><span class="icon icon-link"></span></a>Shortcut key style</h3><div class="wrap-body">

















<table class="shortcuts"><thead><tr><th>Key</th><th>value</th></tr></thead><tbody><tr><td><code>Shortcuts</code></td><td>directions</td></tr><tr><td><code>Shortcuts</code></td><td>directions</td></tr></tbody></table>
<!--rehype:className=shortcuts-->
<p>Add the <code>&#x3C;!--rehype:className=shortcuts--></code> style class to the list to display the shortcut key style.</p>

















<table class="shortcuts-last"><thead><tr><th align="left">Key</th><th>value</th></tr></thead><tbody><tr><td align="left">directions</td><td><code>Shortcuts</code></td></tr><tr><td align="left">directions</td><td><code>Shortcuts</code></td></tr></tbody></table>
<!--rehype:className=shortcuts-last-->
<p>Add the <code>&#x3C;!--rehype:className=shortcuts-last--></code> style class to the list to display the shortcut key style.</p>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="code-line-number"><a aria-hidden="true" tabindex="-1" href="#code-line-number"><span class="icon icon-link"></span></a>Code line number</h3><div class="wrap-body">
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line line-number" line="1"><span class="token keyword module">export</span> <span class="token keyword">const</span> <span class="token maybe-class-name">Student</span> <span class="token operator">=</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">Student</span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>div</span><span class="token punctuation">></span></span><span class="token punctuation">;</span>
</span><span class="code-line line-number" line="2"><span class="token keyword">const</span> school <span class="token operator">=</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">School</span><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>div</span><span class="token punctuation">></span></span><span class="token punctuation">;</span>
</span></code></pre>
<p>Here is a <code>Markdown</code> code example</p>
<pre class="language-markdown"><code class="language-markdown code-highlight"><span class="code-line">  ```jsx showLineNumbers
</span></code></pre>
<p>Add the <code>showLineNumbers</code> flag after the markup language</p>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="built-in-class-style"><a aria-hidden="true" tabindex="-1" href="#built-in-class-style"><span class="icon icon-link"></span></a>Built-in class style</h3><div class="wrap-body">





























<table class="shortcuts"><thead><tr><th align="left">:-</th><th>-</th></tr></thead><tbody><tr><td align="left"><code>shortcuts</code></td><td>shortcut key style</td></tr><tr><td align="left"><code>wrap-text</code></td><td>beyond newline</td></tr><tr><td align="left"><code>show-header</code></td><td>display header</td></tr><tr><td align="left"><code>style-none</code></td><td>Hide <code>&#x3C;ul></code> list styles</td></tr><tr><td align="left"><code>style-list</code></td><td><code>&#x3C;table></code> cell row display</td></tr></tbody></table>
<!--rehype:className=shortcuts-->
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="color-element"><a aria-hidden="true" tabindex="-1" href="#color-element"><span class="icon icon-link"></span></a>Color Element</h3><div class="wrap-body">





























<table class="shortcuts"><thead><tr><th align="left">:-</th><th>-</th></tr></thead><tbody><tr><td align="left"><code>&#x3C;yel></code></td><td><yel>Yellow</yel></td></tr><tr><td align="left"><code>&#x3C;red></code></td><td><yel>Red</yel></td></tr><tr><td align="left"><code>&#x3C;pur></code></td><td><pur>Purple</pur></td></tr><tr><td align="left"><code>&#x3C;code></code> Or <code>``</code></td><td><code>Green</code><code>Color</code></td></tr><tr><td align="left"><code>&#x3C;del></code> Or <code>~~delete~~</code></td><td><del><del>Red Color</del></del></td></tr></tbody></table>
<!--rehype:className=shortcuts-->
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="html-code-preview"><a aria-hidden="true" tabindex="-1" href="#html-code-preview"><span class="icon icon-link"></span></a>HTML code preview</h3><div class="wrap-body">
<pre><code class="code-highlight"><span class="code-line">  ```html preview
</span><span class="code-line">  &#x3C;b>Here is your HTML code&#x3C;/b>
</span><span class="code-line">  \```
</span></code></pre>
<hr>
<pre><b>Here is your HTML code</b>
</pre>
<p>The above <a href="./markdown.html"><code>markdown</code></a> code adds the <code>preview</code> flag in the <code>meta</code> position, and the <a href="./html.html">HTML</a> code will be executed to preview</p>
</div></div></div><div class="wrap h3body-not-exist" style="padding-top: 0;"><div class="wrap-header h3wrap"><h3 style="display:none;" id="hide-card-title"><a aria-hidden="true" tabindex="-1" href="#hide-card-title"><span class="icon icon-link"></span></a>Hide card title</h3><div class="wrap-body">
<!--rehype:style=display:none;&wrap-style=padding-top: 0;-->
<pre class="wrap-text"><code class="code-highlight"><span class="code-line">Hide card title, add comment style below H3 title
</span></code></pre>
<!--rehype:className=wrap-text-->
<pre class="wrap-text "><code class="language-markdown code-highlight"><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Hide card title</span>
</span><span class="code-line highlight-line"><span class="token comment">&#x3C;!--rehype:style=display:none;&#x26;wrap-style=padding-top: 0;--></span>
</span></code></pre>
<!--rehype:className=wrap-text -->
</div></div></div><div class="wrap h3body-not-exist col-span-2"><div class="wrap-header h3wrap"><h3 id="注释类配置"><a aria-hidden="true" tabindex="-1" href="#注释类配置"><span class="icon icon-link"></span></a>注释类配置</h3><div class="wrap-body">
<!--rehype:wrap-class=col-span-2-->





















































<table><thead><tr><th>类</th><th>说明</th></tr></thead><tbody><tr><td><code>&#x3C;!--rehype:className=wrap-text--></code></td><td>强制<code>换行</code></td></tr><tr><td><code>&#x3C;!--rehype:className=show-header--></code></td><td>展示表格<code>表头</code></td></tr><tr><td><code>&#x3C;!--rehype:className=shortcuts--></code></td><td>表首列<code>快捷键</code>样式</td></tr><tr><td><code>&#x3C;!--rehype:className=shortcuts-last--></code></td><td>表尾列<code>快捷键</code>样式</td></tr><tr><td><code>&#x3C;!--rehype:className=auto-wrap--></code></td><td>隐藏表头强制小尺寸<code>自动换行</code></td></tr><tr><td><code>&#x3C;!--rehype:className=style-list-arrow--></code></td><td>列表<code>箭头</code>样式展示表格</td></tr><tr><td><code>&#x3C;!--rehype:className=style-list--></code></td><td><code>列表</code>样式展示表格</td></tr><tr><td><code>&#x3C;!--rehype:className=left-align--></code></td><td>表格末尾列<code>左对齐</code></td></tr><tr><td><code>&#x3C;!--rehype:className=style-none--></code></td><td>&#x3C;li> 没有标记样式</td></tr><tr><td><code>&#x3C;!--rehype:className=style-timeline--></code></td><td><code>时间轴</code>样式</td></tr><tr><td><code>&#x3C;!--rehype:className=style-arrow--></code></td><td><code>箭头</code>标记</td></tr></tbody></table>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="katex-数学渲染"><a aria-hidden="true" tabindex="-1" href="#katex-数学渲染"><span class="icon icon-link"></span></a>KaTeX 数学渲染</h3><div class="wrap-body">
<pre class="language-katex"><code class="language-KaTeX code-highlight math math-display"><span class="katex-display"><span class="katex"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML" display="block"><semantics><mrow><mi>c</mi><mo>=</mo><mo>±</mo><msqrt><mrow><msup><mi>a</mi><mn>2</mn></msup><mo>+</mo><msup><mi>b</mi><mn>2</mn></msup></mrow></msqrt><mi>L</mi><mo>=</mo><mfrac><mn>1</mn><mn>2</mn></mfrac><mi>ρ</mi><msup><mi>v</mi><mn>2</mn></msup><mi>S</mi><msub><mi>C</mi><mi>L</mi></msub></mrow><annotation encoding="application/x-tex">c = \pm\sqrt{a^2 + b^2}
L = \frac{1}{2} \rho v^2 S C_L
</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.4306em;"></span><span class="mord mathnormal">c</span><span class="mspace" style="margin-right:0.2778em;"></span><span class="mrel">=</span><span class="mspace" style="margin-right:0.2778em;"></span></span><span class="base"><span class="strut" style="height:1.24em;vertical-align:-0.1777em;"></span><span class="mord">±</span><span class="mord sqrt"><span class="vlist-t vlist-t2"><span class="vlist-r"><span class="vlist" style="height:1.0623em;"><span class="svg-align" style="top:-3.2em;"><span class="pstrut" style="height:3.2em;"></span><span class="mord" style="padding-left:1em;"><span class="mord"><span class="mord mathnormal">a</span><span class="msupsub"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.7401em;"><span style="top:-2.989em;margin-right:0.05em;"><span class="pstrut" style="height:2.7em;"></span><span class="sizing reset-size6 size3 mtight"><span class="mord mtight">2</span></span></span></span></span></span></span></span><span class="mspace" style="margin-right:0.2222em;"></span><span class="mbin">+</span><span class="mspace" style="margin-right:0.2222em;"></span><span class="mord"><span class="mord mathnormal">b</span><span class="msupsub"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.7401em;"><span style="top:-2.989em;margin-right:0.05em;"><span class="pstrut" style="height:2.7em;"></span><span class="sizing reset-size6 size3 mtight"><span class="mord mtight">2</span></span></span></span></span></span></span></span></span></span><span style="top:-3.0223em;"><span class="pstrut" style="height:3.2em;"></span><span class="hide-tail" style="min-width:1.02em;height:1.28em;"><svg xmlns="http://www.w3.org/2000/svg" width="400em" height="1.28em" viewBox="0 0 400000 1296" preserveAspectRatio="xMinYMin slice"><path d="M263,681c0.7,0,18,39.7,52,119
c34,79.3,68.167,158.7,102.5,238c34.3,79.3,51.8,119.3,52.5,120
c340,-704.7,510.7,-1060.3,512,-1067
l0 -0
c4.7,-7.3,11,-11,19,-11
H40000v40H1012.3
s-271.3,567,-271.3,567c-38.7,80.7,-84,175,-136,283c-52,108,-89.167,185.3,-111.5,232
c-22.3,46.7,-33.8,70.3,-34.5,71c-4.7,4.7,-12.3,7,-23,7s-12,-1,-12,-1
s-109,-253,-109,-253c-72.7,-168,-109.3,-252,-110,-252c-10.7,8,-22,16.7,-34,26
c-22,17.3,-33.3,26,-34,26s-26,-26,-26,-26s76,-59,76,-59s76,-60,76,-60z
M1001 80h400000v40h-400000z"></path></svg></span></span></span><span class="vlist-s">​</span></span><span class="vlist-r"><span class="vlist" style="height:0.1777em;"><span></span></span></span></span></span><span class="mord mathnormal">L</span><span class="mspace" style="margin-right:0.2778em;"></span><span class="mrel">=</span><span class="mspace" style="margin-right:0.2778em;"></span></span><span class="base"><span class="strut" style="height:2.0074em;vertical-align:-0.686em;"></span><span class="mord"><span class="mopen nulldelimiter"></span><span class="mfrac"><span class="vlist-t vlist-t2"><span class="vlist-r"><span class="vlist" style="height:1.3214em;"><span style="top:-2.314em;"><span class="pstrut" style="height:3em;"></span><span class="mord"><span class="mord">2</span></span></span><span style="top:-3.23em;"><span class="pstrut" style="height:3em;"></span><span class="frac-line" style="border-bottom-width:0.04em;"></span></span><span style="top:-3.677em;"><span class="pstrut" style="height:3em;"></span><span class="mord"><span class="mord">1</span></span></span></span><span class="vlist-s">​</span></span><span class="vlist-r"><span class="vlist" style="height:0.686em;"><span></span></span></span></span></span><span class="mclose nulldelimiter"></span></span><span class="mord mathnormal">ρ</span><span class="mord"><span class="mord mathnormal" style="margin-right:0.03588em;">v</span><span class="msupsub"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.8641em;"><span style="top:-3.113em;margin-right:0.05em;"><span class="pstrut" style="height:2.7em;"></span><span class="sizing reset-size6 size3 mtight"><span class="mord mtight">2</span></span></span></span></span></span></span></span><span class="mord mathnormal" style="margin-right:0.05764em;">S</span><span class="mord"><span class="mord mathnormal" style="margin-right:0.07153em;">C</span><span class="msupsub"><span class="vlist-t vlist-t2"><span class="vlist-r"><span class="vlist" style="height:0.3283em;"><span style="top:-2.55em;margin-left:-0.0715em;margin-right:0.05em;"><span class="pstrut" style="height:2.7em;"></span><span class="sizing reset-size6 size3 mtight"><span class="mord mathnormal mtight">L</span></span></span></span><span class="vlist-s">​</span></span><span class="vlist-r"><span class="vlist" style="height:0.15em;"><span></span></span></span></span></span></span></span></span></span></span></code></pre>
<p>上面示例 <a href="./markdown.html"><code>Markdown</code></a> 代码源码</p>
<pre class="language-markdown"><code class="language-markdown code-highlight"><span class="code-line highlight-line">  ```KaTeX
</span><span class="code-line">  c = \pm\sqrt{a^2 + b^2}
</span><span class="code-line">  L = \frac{1}{2} \rho v^2 S C_L
</span></code></pre>
<p>还可以单行展示 <code class="math math-inline"><span class="katex"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mi>c</mi><mo>=</mo><mo>±</mo><msqrt><mrow><msup><mi>a</mi><mn>2</mn></msup><mo>+</mo><msup><mi>b</mi><mn>2</mn></msup></mrow></msqrt></mrow><annotation encoding="application/x-tex">c = \pm\sqrt{a^2 + b^2}</annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.4306em;"></span><span class="mord mathnormal">c</span><span class="mspace" style="margin-right:0.2778em;"></span><span class="mrel">=</span><span class="mspace" style="margin-right:0.2778em;"></span></span><span class="base"><span class="strut" style="height:1.04em;vertical-align:-0.1266em;"></span><span class="mord">±</span><span class="mord sqrt"><span class="vlist-t vlist-t2"><span class="vlist-r"><span class="vlist" style="height:0.9134em;"><span class="svg-align" style="top:-3em;"><span class="pstrut" style="height:3em;"></span><span class="mord" style="padding-left:0.833em;"><span class="mord"><span class="mord mathnormal">a</span><span class="msupsub"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.7401em;"><span style="top:-2.989em;margin-right:0.05em;"><span class="pstrut" style="height:2.7em;"></span><span class="sizing reset-size6 size3 mtight"><span class="mord mtight">2</span></span></span></span></span></span></span></span><span class="mspace" style="margin-right:0.2222em;"></span><span class="mbin">+</span><span class="mspace" style="margin-right:0.2222em;"></span><span class="mord"><span class="mord mathnormal">b</span><span class="msupsub"><span class="vlist-t"><span class="vlist-r"><span class="vlist" style="height:0.7401em;"><span style="top:-2.989em;margin-right:0.05em;"><span class="pstrut" style="height:2.7em;"></span><span class="sizing reset-size6 size3 mtight"><span class="mord mtight">2</span></span></span></span></span></span></span></span></span></span><span style="top:-2.8734em;"><span class="pstrut" style="height:3em;"></span><span class="hide-tail" style="min-width:0.853em;height:1.08em;"><svg xmlns="http://www.w3.org/2000/svg" width="400em" height="1.08em" viewBox="0 0 400000 1080" preserveAspectRatio="xMinYMin slice"><path d="M95,702
c-2.7,0,-7.17,-2.7,-13.5,-8c-5.8,-5.3,-9.5,-10,-9.5,-14
c0,-2,0.3,-3.3,1,-4c1.3,-2.7,23.83,-20.7,67.5,-54
c44.2,-33.3,65.8,-50.3,66.5,-51c1.3,-1.3,3,-2,5,-2c4.7,0,8.7,3.3,12,10
s173,378,173,378c0.7,0,35.3,-71,104,-213c68.7,-142,137.5,-285,206.5,-429
c69,-144,104.5,-217.7,106.5,-221
l0 -0
c5.3,-9.3,12,-14,20,-14
H400000v40H845.2724
s-225.272,467,-225.272,467s-235,486,-235,486c-2.7,4.7,-9,7,-19,7
c-6,0,-10,-1,-12,-3s-194,-422,-194,-422s-65,47,-65,47z
M834 80h400000v40h-400000z"></path></svg></span></span></span><span class="vlist-s">​</span></span><span class="vlist-r"><span class="vlist" style="height:0.1266em;"><span></span></span></span></span></span></span></span></span></code>，需要标记 <code>`KaTeX:数学公式`</code> 将被显示成数学公式，这是基于 <a href="https://katex.org/">KaTeX</a> 生成</p>
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="布局"><a aria-hidden="true" tabindex="-1" href="#布局"><span class="icon icon-link"></span></a>布局</h2><div class="wrap-body">
</div></div><div class="h2wrap-body"><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="h2-部分"><a aria-hidden="true" tabindex="-1" href="#h2-部分"><span class="icon icon-link"></span></a>H2 部分</h3><div class="wrap-body">
<!--rehype:wrap-class=row-span-2-->
<pre class="language-markdown"><code class="language-markdown code-highlight"><span class="code-line"><span class="token title important">H2 部分
</span></span><span class="code-line"><span class="token title important"><span class="token punctuation">---</span></span>
</span><span class="code-line">
</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> 卡片 1 (H3 部分)</span>
</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> 卡片 2 (H3 部分)</span>
</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> 卡片 3 (H3 部分)</span>
</span></code></pre>
<p>上面实例 <code>H2 部分</code> 标题下面有三个<code>卡片</code>，默认 <code>3</code> 栏布局。</p>
<pre class="language-markdown"><code class="language-markdown code-highlight"><span class="code-line"><span class="token title important">H2 部分
</span></span><span class="code-line"><span class="token title important"><span class="token punctuation">---</span></span>
</span><span class="code-line highlight-line"><span class="token comment">&#x3C;!--rehype:body-class=cols-2--></span>
</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> 卡片 1 (H3 部分)</span>
</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> 卡片 2 (H3 部分)</span>
</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> 卡片 3 (H3 部分)</span>
</span></code></pre>
<p>使用注释配置为 H2 部分 添加 <code>col-span-2</code> 类，将 <del><code>3</code></del> 栏布局变成 <code>2</code> 栏布局。</p>

































<table class="show-header "><thead><tr><th>类</th><th>说明</th></tr></thead><tbody><tr><td><code>cols-1</code></td><td><code>1</code> 栏卡片布局</td></tr><tr><td><code>cols-2</code></td><td><code>2</code> 栏卡片布局</td></tr><tr><td><code>cols-3</code></td><td><code>3</code> 栏卡片布局</td></tr><tr><td><code>cols-4</code></td><td><code>4</code> 栏卡片布局</td></tr><tr><td><code>cols-5</code></td><td><code>5</code> 栏卡片布局</td></tr><tr><td><code>cols-{1~6}</code></td><td><code>1~6</code> 栏卡片布局</td></tr></tbody></table>
<!--rehype:className=show-header -->
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="占位布局-style-写法"><a aria-hidden="true" tabindex="-1" href="#占位布局-style-写法"><span class="icon icon-link"></span></a>占位布局 style 写法</h3><div class="wrap-body">
<pre class="wrap-text "><code class="language-markdown code-highlight"><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> H3 部分</span>
</span><span class="code-line highlight-line"><span class="token comment">&#x3C;!--rehype:wrap-style=grid-row: span 2/span 2;--></span>
</span></code></pre>
<!--rehype:className=wrap-text -->
<p>放在 <code>### H3 部分</code> 下面的注释配置，与 <code>&#x3C;!--rehype:wrap-class=row-span-2--></code> 相同，设置 2 行占位布局。</p>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="卡片栏布局-style-写法"><a aria-hidden="true" tabindex="-1" href="#卡片栏布局-style-写法"><span class="icon icon-link"></span></a>卡片栏布局 style 写法</h3><div class="wrap-body">
<pre class="wrap-text "><code class="language-markdown code-highlight"><span class="code-line"><span class="token title important"><span class="token punctuation">##</span> H2 部分</span>
</span><span class="code-line highlight-line"><span class="token comment">&#x3C;!--rehype:body-style=grid-template-columns: repeat(2,minmax(0,1fr));--></span>
</span></code></pre>
<!--rehype:className=wrap-text -->
<p>放在 <code>## H2 部分</code> 下面的注释配置，与 <code>&#x3C;!--rehype:body-class=cols-2--></code> 相同，设置 2 栏布局。</p>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="h3-部分"><a aria-hidden="true" tabindex="-1" href="#h3-部分"><span class="icon icon-link"></span></a>H3 部分</h3><div class="wrap-body">
<pre class="language-markdown"><code class="language-markdown code-highlight"><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> 卡片 1 (H3 部分)</span>
</span><span class="code-line highlight-line"><span class="token comment">&#x3C;!--rehype:wrap-class=row-span-2--></span>
</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> 卡片 2 (H3 部分)</span>
</span><span class="code-line highlight-line"><span class="token comment">&#x3C;!--rehype:wrap-class=col-span-3--></span>
</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> 卡片 3 (H3 部分)</span>
</span></code></pre>
<hr>

















































<table><thead><tr><th align="left">:--</th><th>--</th></tr></thead><tbody><tr><td align="left">合并 <strong>列</strong> 布局</td><td></td></tr><tr><td align="left"><code>col-span-2</code></td><td><code>2</code> 列占位</td></tr><tr><td align="left"><code>col-span-3</code></td><td><code>3</code> 列占位</td></tr><tr><td align="left"><code>col-span-4</code></td><td><code>4</code> 列占位</td></tr><tr><td align="left"><code>col-span-{2~10}</code></td><td><code>{2~10}</code> 列占位</td></tr><tr><td align="left">合并 <strong>行</strong> 布局</td><td></td></tr><tr><td align="left"><code>row-span-2</code></td><td><code>2</code> 行占位</td></tr><tr><td align="left"><code>row-span-3</code></td><td><code>3</code> 行占位</td></tr><tr><td align="left"><code>row-span-4</code></td><td><code>4</code> 行占位</td></tr><tr><td align="left"><code>row-span-{2~10}</code></td><td><code>{2~10}</code> 行占位</td></tr></tbody></table>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="卡片合并行布局-1"><a aria-hidden="true" tabindex="-1" href="#卡片合并行布局-1"><span class="icon icon-link"></span></a>卡片合并行布局 1</h3><div class="wrap-body">
<pre class="language-shell"><code class="language-shell code-highlight"><span class="code-line">╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
</span><span class="code-line">┆   H3 Title <span class="token number">1</span>  ┆
</span><span class="code-line">╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯
</span><span class="code-line">╭┈┈┈╮ ╭┈┈┈╮ ╭┈┈┈╮
</span><span class="code-line">┆ <span class="token number">2</span> ┆ ┆ <span class="token number">3</span> ┆ ┆ <span class="token number">4</span> ┆
</span><span class="code-line">╰┈┈┈╯ ╰┈┈┈╯ ╰┈┈┈╯
</span></code></pre>
<p>上面布局效果 <a href="./markdown.html">Markdown</a> 源码：</p>
<pre class="language-markdown"><code class="language-markdown code-highlight"><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> H3 Title 1</span>
</span><span class="code-line"><span class="token comment">&#x3C;!--rehype:wrap-class=col-span-3--></span>
</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Title 2</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Title 3</span>
</span><span class="code-line">
</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Title 4</span>
</span></code></pre>
<p>第一标题添加 <code>col-span-3</code> 占位类</p>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="卡片列合并布局-2"><a aria-hidden="true" tabindex="-1" href="#卡片列合并布局-2"><span class="icon icon-link"></span></a>卡片列合并布局 2</h3><div class="wrap-body">
<pre class="language-shell"><code class="language-shell code-highlight"><span class="code-line">╭┈┈┈╮ ╭┈┈┈╮ ╭┈┈┈╮
</span><span class="code-line">┆ <span class="token number">1</span> ┆ ┆ <span class="token number">2</span> ┆ ┆ <span class="token number">3</span> ┆
</span><span class="code-line">┆   ┆ ╰┈┈┈╯ ╰┈┈┈╯
</span><span class="code-line">┆   ┆ ╭┈┈┈╮ ╭┈┈┈╮
</span><span class="code-line">┆   ┆ ┆ <span class="token number">4</span> ┆ ┆ <span class="token number">5</span> ┆
</span><span class="code-line">╰┈┈┈╯ ╰┈┈┈╯ ╰┈┈┈╯
</span></code></pre>
<p>上面布局效果 <a href="./markdown.html">Markdown</a> 源码：</p>
<pre class="language-markdown"><code class="language-markdown code-highlight"><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Title 1</span>
</span><span class="code-line"><span class="token comment">&#x3C;!--rehype:wrap-class=row-span-2--></span>
</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Title 2</span>
</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Title 3</span>
</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Title 4</span>
</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Title 5</span>
</span></code></pre>
<p>在 <code>Title 1</code> 标题添加 <code>row-span-2</code> 占位类</p>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="卡片列合并布局-3"><a aria-hidden="true" tabindex="-1" href="#卡片列合并布局-3"><span class="icon icon-link"></span></a>卡片列合并布局 3</h3><div class="wrap-body">
<pre class="language-shell"><code class="language-shell code-highlight"><span class="code-line">╭┈┈┈╮ ╭┈┈┈╮ ╭┈┈┈╮
</span><span class="code-line">┆ <span class="token number">1</span> ┆ ┆ <span class="token number">2</span> ┆ ┆ <span class="token number">3</span> ┆
</span><span class="code-line">╰┈┈┈╯ ┆   ┆ ╰┈┈┈╯
</span><span class="code-line">╭┈┈┈╮ ┆   ┆ ╭┈┈┈╮
</span><span class="code-line">┆ <span class="token number">4</span> ┆ ┆   ┆ ┆ <span class="token number">5</span> ┆
</span><span class="code-line">╰┈┈┈╯ ╰┈┈┈╯ ╰┈┈┈╯
</span></code></pre>
<p>上面布局效果 Markdown 源码：</p>
<pre class="language-markdown"><code class="language-markdown code-highlight"><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Title 1</span>
</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Title 2</span>
</span><span class="code-line"><span class="token comment">&#x3C;!--rehype:wrap-class=row-span-2--></span>
</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Title 3</span>
</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Title 4</span>
</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Title 5</span>
</span></code></pre>
<p>在 <code>Title 2</code> 标题添加 <code>row-span-2</code> 占位类</p>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="卡片列合并布局-4"><a aria-hidden="true" tabindex="-1" href="#卡片列合并布局-4"><span class="icon icon-link"></span></a>卡片列合并布局 4</h3><div class="wrap-body">
<pre class="language-shell"><code class="language-shell code-highlight"><span class="code-line">╭┈┈┈╮ ╭┈┈┈╮ ╭┈┈┈╮
</span><span class="code-line">┆ <span class="token number">1</span> ┆ ┆ <span class="token number">2</span> ┆ ┆ <span class="token number">3</span> ┆
</span><span class="code-line">╰┈┈┈╯ ╰┈┈┈╯ ┆   ┆
</span><span class="code-line">╭┈┈┈╮ ╭┈┈┈╮ ┆   ┆
</span><span class="code-line">┆ <span class="token number">4</span> ┆ ┆ <span class="token number">5</span> ┆ ┆   ┆
</span><span class="code-line">╰┈┈┈╯ ╰┈┈┈╯ ╰┈┈┈╯
</span></code></pre>
<p>上面布局效果 <a href="./markdown.html">Markdown</a> 源码：</p>
<pre class="language-markdown"><code class="language-markdown code-highlight"><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Title 1</span>
</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Title 2</span>
</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Title 3</span>
</span><span class="code-line"><span class="token comment">&#x3C;!--rehype:wrap-class=row-span-2--></span>
</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Title 4</span>
</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Title 5</span>
</span></code></pre>
<p>在 <code>Title 3</code> 标题添加 <code>row-span-2</code> 占位类</p>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="卡片列合并布局-5"><a aria-hidden="true" tabindex="-1" href="#卡片列合并布局-5"><span class="icon icon-link"></span></a>卡片列合并布局 5</h3><div class="wrap-body">
<pre class="language-shell"><code class="language-shell code-highlight"><span class="code-line">╭┈┈┈╮ ╭┈┈┈╮ ╭┈┈┈╮
</span><span class="code-line">┆ <span class="token number">1</span> ┆ ┆ <span class="token number">2</span> ┆ ┆ <span class="token number">3</span> ┆
</span><span class="code-line">╰┈┈┈╯ ╰┈┈┈╯ ╰┈┈┈╯ 
</span><span class="code-line">╭┈┈┈╮ ╭┈┈┈┈┈┈┈┈┈╮
</span><span class="code-line">┆ <span class="token number">4</span> ┆ ┆ <span class="token number">5</span>       ┆
</span><span class="code-line">╰┈┈┈╯ ╰┈┈┈┈┈┈┈┈┈╯
</span></code></pre>
<p>上面布局效果 <a href="./markdown.html">Markdown</a> 源码：</p>
<pre class="language-markdown"><code class="language-markdown code-highlight"><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Title 1</span>
</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Title 2</span>
</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Title 3</span>
</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Title 4</span>
</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Title 5</span>
</span><span class="code-line"><span class="token comment">&#x3C;!--rehype:wrap-class=col-span-2--></span>
</span></code></pre>
<p>在 <code>Title 5</code> 标题添加 <code>col-span-2</code> 占位类</p>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="卡片列合并布局-6"><a aria-hidden="true" tabindex="-1" href="#卡片列合并布局-6"><span class="icon icon-link"></span></a>卡片列合并布局 6</h3><div class="wrap-body">
<pre class="language-shell"><code class="language-shell code-highlight"><span class="code-line">╭┈┈┈╮ ╭┈┈┈┈┈┈┈┈┈╮
</span><span class="code-line">┆ <span class="token number">1</span> ┆ ┆ <span class="token number">2</span>       ┆
</span><span class="code-line">╰┈┈┈╯ ╰┈┈┈┈┈┈┈┈┈╯
</span><span class="code-line">╭┈┈┈╮ ╭┈┈┈╮ ╭┈┈┈╮
</span><span class="code-line">┆ <span class="token number">3</span> ┆ ┆ <span class="token number">4</span> ┆ ┆ <span class="token number">5</span> ┆
</span><span class="code-line">╰┈┈┈╯ ╰┈┈┈╯ ╰┈┈┈╯
</span></code></pre>
<p>上面布局效果 <a href="./markdown.html">Markdown</a> 源码：</p>
<pre class="language-markdown"><code class="language-markdown code-highlight"><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Title 1</span>
</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Title 2</span>
</span><span class="code-line"><span class="token comment">&#x3C;!--rehype:wrap-class=col-span-2--></span>
</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Title 3</span>
</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Title 4</span>
</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Title 5</span>
</span></code></pre>
<p>在 <code>Title 2</code> 标题添加 <code>col-span-2</code> 占位类</p>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="卡片列合并布局-7"><a aria-hidden="true" tabindex="-1" href="#卡片列合并布局-7"><span class="icon icon-link"></span></a>卡片列合并布局 7</h3><div class="wrap-body">
<pre class="language-shell"><code class="language-shell code-highlight"><span class="code-line">╭┈┈┈╮ ╭┈┈┈╮ ╭┈┈┈╮
</span><span class="code-line">┆ <span class="token number">1</span> ┆ ┆ <span class="token number">2</span> ┆ ┆ <span class="token number">3</span> ┆
</span><span class="code-line">╰┈┈┈╯ ╰┈┈┈╯ ╰┈┈┈╯
</span><span class="code-line">╭┈┈┈┈┈┈┈┈┈╮ ╭┈┈┈╮
</span><span class="code-line">┆ <span class="token number">4</span>       ┆ ┆ <span class="token number">5</span> ┆
</span><span class="code-line">╰┈┈┈┈┈┈┈┈┈╯ ╰┈┈┈╯
</span></code></pre>
<p>上面布局效果 <a href="./markdown.html">Markdown</a> 源码：</p>
<pre class="language-markdown"><code class="language-markdown code-highlight"><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Title 1</span>
</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Title 2</span>
</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Title 3</span>
</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Title 4</span>
</span><span class="code-line"><span class="token comment">&#x3C;!--rehype:wrap-class=col-span-2--></span>
</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Title 5</span>
</span></code></pre>
<p>在 <code>Title 4</code> 标题添加 <code>col-span-2</code> 占位类</p>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="卡片列合并布局-8"><a aria-hidden="true" tabindex="-1" href="#卡片列合并布局-8"><span class="icon icon-link"></span></a>卡片列合并布局 8</h3><div class="wrap-body">
<pre class="language-shell"><code class="language-shell code-highlight"><span class="code-line">╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
</span><span class="code-line">┆     H3 Title <span class="token number">1</span>      ┆
</span><span class="code-line">╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯
</span><span class="code-line">╭┈┈┈╮ ╭┈┈┈╮ ╭┈┈┈╮ ╭┈┈┈╮
</span><span class="code-line">┆ <span class="token number">2</span> ┆ ┆ <span class="token number">3</span> ┆ ┆ <span class="token number">4</span> ┆ ┆ <span class="token number">5</span> ┆
</span><span class="code-line">╰┈┈┈╯ ╰┈┈┈╯ ╰┈┈┈╯ ╰┈┈┈╯
</span></code></pre>
<p>上面布局效果 <a href="./markdown.html">Markdown</a> 源码：</p>
<pre class="language-markdown"><code class="language-markdown code-highlight"><span class="code-line"><span class="token title important">H2 部分
</span></span><span class="code-line"><span class="token title important"><span class="token punctuation">----</span></span>
</span><span class="code-line"><span class="token comment">&#x3C;!--rehype:body-class=cols-4--></span>
</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Title 1</span>
</span><span class="code-line"><span class="token comment">&#x3C;!--rehype:wrap-class=col-span-4--></span>
</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Title 2</span>
</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Title 3</span>
</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Title 4</span>
</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Title 5</span>
</span></code></pre>
<p>在 <code>H2 部分</code> 标题添加 <code>cols-4</code>，和 <code>Title 1</code> 添加 <code>col-span-4</code> 合并栏</p>
</div></div></div><div class="wrap h3body-not-exist col-span-2"><div class="wrap-header h3wrap"><h3 id="卡片列合并布局-9"><a aria-hidden="true" tabindex="-1" href="#卡片列合并布局-9"><span class="icon icon-link"></span></a>卡片列合并布局 9</h3><div class="wrap-body">
<!--rehype:wrap-class=col-span-2-->
<pre class="language-shell"><code class="language-shell code-highlight"><span class="code-line">╭┈┈┈┈┈┈┈┈┈╮ ╭┈┈┈╮
</span><span class="code-line">┆ <span class="token number">1</span>       ┆ ┆ <span class="token number">2</span> ┆
</span><span class="code-line">┆         ┆ ╰┈┈┈╯
</span><span class="code-line">┆         ┆ ╭┈┈┈╮
</span><span class="code-line">┆         ┆ ┆ <span class="token number">3</span> ┆
</span><span class="code-line">╰┈┈┈┈┈┈┈┈┈╯ ╰┈┈┈╯
</span><span class="code-line">╭┈┈┈╮ ╭┈┈┈╮ ╭┈┈┈╮
</span><span class="code-line">┆ <span class="token number">4</span> ┆ ┆ <span class="token number">5</span> ┆ ┆ <span class="token number">6</span> ┆
</span><span class="code-line">╰┈┈┈╯ ╰┈┈┈╯ ╰┈┈┈╯
</span></code></pre>
<p>上面布局效果 <a href="./markdown.html">Markdown</a> 源码：</p>
<pre class="language-markdown"><code class="language-markdown code-highlight"><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Title 1</span>
</span><span class="code-line"><span class="token comment">&#x3C;!--rehype:wrap-class=col-span-2 row-span-2--></span>
</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Title 2</span>
</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Title 3</span>
</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Title 4</span>
</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Title 5</span>
</span><span class="code-line"><span class="token title important"><span class="token punctuation">###</span> Title 6</span>
</span></code></pre>
<p>在 <code>Title 1</code> 标题添加 <code>col-span-2</code> 和 <code>row-span-2</code> 占位类，使用 <code>空格</code> 间隔。</p>
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="表格"><a aria-hidden="true" tabindex="-1" href="#表格"><span class="icon icon-link"></span></a>表格</h2><div class="wrap-body">
</div></div><div class="h2wrap-body"><div class="wrap h3body-exist"><div class="wrap-header h3wrap"><h3 id="基本表格"><a aria-hidden="true" tabindex="-1" href="#基本表格"><span class="icon icon-link"></span></a>基本表格</h3><div class="wrap-body">
<h4 id="date"><a aria-hidden="true" tabindex="-1" href="#date"><span class="icon icon-link"></span></a>Date</h4>





















<table><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>%m/%d/%Y</code></td><td align="left">06/05/2013</td></tr><tr><td align="left"><code>%A, %B %e, %Y</code></td><td align="left">Sunday, June 5, 2013</td></tr><tr><td align="left"><code>%b %e %a</code></td><td align="left">Jun 5 Sun</td></tr></tbody></table>
<h4 id="time"><a aria-hidden="true" tabindex="-1" href="#time"><span class="icon icon-link"></span></a>Time</h4>

















<table><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>%H:%M</code></td><td align="left">23:05</td></tr><tr><td align="left"><code>%I:%M %p</code></td><td align="left">11:05 PM</td></tr></tbody></table>
<p>标题为 <code>H4</code> 的基本表格。</p>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="快捷键"><a aria-hidden="true" tabindex="-1" href="#快捷键"><span class="icon icon-link"></span></a>快捷键</h3><div class="wrap-body">





































<table class="shortcuts"><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>V</code></td><td align="left">Vector</td></tr><tr><td align="left"><code>P</code></td><td align="left">Pencil</td></tr><tr><td align="left"><code>T</code></td><td align="left">Text</td></tr><tr><td align="left"><code>L</code></td><td align="left">Line</td></tr><tr><td align="left"><code>R</code></td><td align="left">Rectangle</td></tr><tr><td align="left"><code>O</code></td><td align="left">Oval</td></tr><tr><td align="left"><code>U</code></td><td align="left">Rounded</td></tr></tbody></table>
<!--rehype:className=shortcuts-->
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="展示标题"><a aria-hidden="true" tabindex="-1" href="#展示标题"><span class="icon icon-link"></span></a>展示标题</h3><div class="wrap-body">

























<table class="show-header"><thead><tr><th>Prefix</th><th>Example</th><th>What</th></tr></thead><tbody><tr><td><code>//</code></td><td><code>//hr[@class='edge']</code></td><td>Anywhere</td></tr><tr><td><code>./</code></td><td><code>./a</code></td><td>Relative</td></tr><tr><td><code>/</code></td><td><code>/html/body/div</code></td><td>Root</td></tr></tbody></table>
<!--rehype:className=show-header-->
<p><code>&#x3C;!--rehype:className=show-header--></code></p>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="列表样式展示表格"><a aria-hidden="true" tabindex="-1" href="#列表样式展示表格"><span class="icon icon-link"></span></a>列表样式展示表格</h3><div class="wrap-body">





















<table class="style-list"><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>visualEffectState.inactive</code></td><td align="left">后台应一直显示为非激活状态。</td></tr><tr><td align="left"><code>titleBarStyle</code> <em>string</em> <em>(win/mac)</em></td><td align="left">窗口标题栏样式。默认值 <em>(default)</em></td></tr><tr><td align="left"><code>titleBarStyle.default</code></td><td align="left">分别返回 <em>mac</em> 或者 <em>win</em> 的标准标题栏</td></tr></tbody></table>
<!--rehype:className=style-list-->
<p><code>&#x3C;!--rehype:className=style-list--></code></p>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="列表圆圈样式展示表格"><a aria-hidden="true" tabindex="-1" href="#列表圆圈样式展示表格"><span class="icon icon-link"></span></a>列表圆圈样式展示表格</h3><div class="wrap-body">





















<table class="style-list-arrow circle"><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>visualEffectState.inactive</code></td><td align="left">后台应一直显示为非激活状态。</td></tr><tr><td align="left"><code>titleBarStyle</code> <em>string</em> <em>(win/mac)</em></td><td align="left">窗口标题栏样式。默认值 <em>(default)</em></td></tr><tr><td align="left"><code>titleBarStyle.default</code></td><td align="left">分别返回 <em>mac</em> 或者 <em>win</em> 的标准标题栏</td></tr></tbody></table>
<!--rehype:className=style-list-arrow circle-->
<p>添加 <code>style-list-arrow</code> 和 <code>circle</code> 样式</p>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="列表实心圆圈样式展示表格"><a aria-hidden="true" tabindex="-1" href="#列表实心圆圈样式展示表格"><span class="icon icon-link"></span></a>列表实心圆圈样式展示表格</h3><div class="wrap-body">





















<table class="style-list-arrow circlefill"><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>visualEffectState.inactive</code></td><td align="left">后台应一直显示为非激活状态。</td></tr><tr><td align="left"><code>titleBarStyle</code> <em>string</em> <em>(win/mac)</em></td><td align="left">窗口标题栏样式。默认值 <em>(default)</em></td></tr><tr><td align="left"><code>titleBarStyle.default</code></td><td align="left">分别返回 <em>mac</em> 或者 <em>win</em> 的标准标题栏</td></tr></tbody></table>
<!--rehype:className=style-list-arrow circlefill-->
<p>添加 <code>style-list-arrow</code> 和 <code>circlefill</code> 样式</p>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="列表方形展示表格"><a aria-hidden="true" tabindex="-1" href="#列表方形展示表格"><span class="icon icon-link"></span></a>列表方形展示表格</h3><div class="wrap-body">





















<table class="style-list-arrow square"><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>visualEffectState.inactive</code></td><td align="left">后台应一直显示为非激活状态。</td></tr><tr><td align="left"><code>titleBarStyle</code> <em>string</em> <em>(win/mac)</em></td><td align="left">窗口标题栏样式。默认值 <em>(default)</em></td></tr><tr><td align="left"><code>titleBarStyle.default</code></td><td align="left">分别返回 <em>mac</em> 或者 <em>win</em> 的标准标题栏</td></tr></tbody></table>
<!--rehype:className=style-list-arrow square-->
<p>添加 <code>style-list-arrow</code> 和 <code>square</code> 样式</p>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="列表实心方形展示表格"><a aria-hidden="true" tabindex="-1" href="#列表实心方形展示表格"><span class="icon icon-link"></span></a>列表实心方形展示表格</h3><div class="wrap-body">





















<table class="style-list-arrow squarefill"><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>visualEffectState.inactive</code></td><td align="left">后台应一直显示为非激活状态。</td></tr><tr><td align="left"><code>titleBarStyle</code> <em>string</em> <em>(win/mac)</em></td><td align="left">窗口标题栏样式。默认值 <em>(default)</em></td></tr><tr><td align="left"><code>titleBarStyle.default</code></td><td align="left">分别返回 <em>mac</em> 或者 <em>win</em> 的标准标题栏</td></tr></tbody></table>
<!--rehype:className=style-list-arrow squarefill-->
<p>添加 <code>style-list-arrow</code> 和 <code>squarefill</code> 样式</p>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="列表箭头样式展示表格"><a aria-hidden="true" tabindex="-1" href="#列表箭头样式展示表格"><span class="icon icon-link"></span></a>列表箭头样式展示表格</h3><div class="wrap-body">





















<table class="style-list-arrow"><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>visualEffectState.inactive</code></td><td align="left">后台应一直显示为非激活状态。</td></tr><tr><td align="left"><code>titleBarStyle</code> <em>string</em> <em>(win/mac)</em></td><td align="left">窗口标题栏样式。默认值 <em>(default)</em></td></tr><tr><td align="left"><code>titleBarStyle.default</code></td><td align="left">分别返回 <em>mac</em> 或者 <em>win</em> 的标准标题栏</td></tr></tbody></table>
<!--rehype:className=style-list-arrow-->
<p><code>&#x3C;!--rehype:className=style-list-arrow--></code></p>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="隐藏表头强制小尺寸自动换行"><a aria-hidden="true" tabindex="-1" href="#隐藏表头强制小尺寸自动换行"><span class="icon icon-link"></span></a>隐藏表头强制小尺寸自动换行</h3><div class="wrap-body">





















<table class="auto-wrap"><thead><tr><th align="left">:-</th><th align="left">:-</th></tr></thead><tbody><tr><td align="left"><code>visualEffectState.inactive</code></td><td align="left">后台应一直显示为非激活状态。</td></tr><tr><td align="left"><code>titleBarStyle</code> <em>string</em> <em>(win/mac)</em></td><td align="left">窗口标题栏样式。默认值 <em>(default)</em></td></tr><tr><td align="left"><code>titleBarStyle.default</code></td><td align="left">分别返回 <em>mac</em> 或者 <em>win</em> 的标准标题栏</td></tr></tbody></table>
<!--rehype:className=auto-wrap-->
<p><code>&#x3C;!--rehype:className=auto-wrap--></code></p>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="表格末尾列左对齐"><a aria-hidden="true" tabindex="-1" href="#表格末尾列左对齐"><span class="icon icon-link"></span></a>表格末尾列左对齐</h3><div class="wrap-body">

















<table class="show-header left-align"><thead><tr><th>Prefix</th><th>What</th></tr></thead><tbody><tr><td><code>//</code></td><td>Anywhere</td></tr><tr><td><code>./</code></td><td>Relative</td></tr></tbody></table>
<!--rehype:className=show-header left-align-->
<p>默认表格末尾列<code>右对齐</code>，添加 <code>&#x3C;!--rehype:className=left-align--></code> 类让其<code>左对齐</code></p>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="强制-code-不换行"><a aria-hidden="true" tabindex="-1" href="#强制-code-不换行"><span class="icon icon-link"></span></a>强制 code 不换行</h3><div class="wrap-body">

















<table class="show-header code-nowrap"><thead><tr><th>Command</th><th>Description</th></tr></thead><tbody><tr><td><code>adb remount</code></td><td>Remounts file system with read/write access</td></tr><tr><td><code>adb reboot bootloader</code></td><td>Reboots the device into fastboot</td></tr></tbody></table>
<!--rehype:className=show-header code-nowrap-->
<p>添加 <code>&#x3C;!--rehype:className=code-nowrap--></code> 注释</p>
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="列表"><a aria-hidden="true" tabindex="-1" href="#列表"><span class="icon icon-link"></span></a>列表</h2><div class="wrap-body">
</div></div><div class="h2wrap-body"><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="一栏默认"><a aria-hidden="true" tabindex="-1" href="#一栏默认"><span class="icon icon-link"></span></a>一栏(默认)</h3><div class="wrap-body">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="四列"><a aria-hidden="true" tabindex="-1" href="#四列"><span class="icon icon-link"></span></a>四列</h3><div class="wrap-body">
<ul class="cols-4">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
</ul>
<!--rehype:className=cols-4-->
<p><code>&#x3C;!--rehype:className=cols-4--></code></p>
</div></div></div><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="列表步骤"><a aria-hidden="true" tabindex="-1" href="#列表步骤"><span class="icon icon-link"></span></a>列表步骤</h3><div class="wrap-body">
<!--rehype:wrap-class=row-span-2-->
<ul class="style-timeline">
<li>
<p><strong>重命名为 new_name</strong></p>
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line">$ <span class="token function">git</span> branch <span class="token parameter variable">-m</span> <span class="token operator">&#x3C;</span>new_name<span class="token operator">></span>
</span></code></pre>
</li>
<li>
<p>推送和<strong>重置</strong></p>
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line">$ <span class="token function">git</span> push origin <span class="token parameter variable">-u</span> <span class="token operator">&#x3C;</span>new_name<span class="token operator">></span>
</span></code></pre>
</li>
<li>
<p>删除远程分支</p>
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line">$ <span class="token function">git</span> push origin <span class="token parameter variable">--delete</span> <span class="token operator">&#x3C;</span>old<span class="token operator">></span>
</span></code></pre>
</li>
</ul>
<!--rehype:className=style-timeline-->
<p><code>&#x3C;!--rehype:className=style-timeline--></code></p>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="没有标记"><a aria-hidden="true" tabindex="-1" href="#没有标记"><span class="icon icon-link"></span></a>没有标记</h3><div class="wrap-body">
<ul class="cols-3 style-none">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
</ul>
<!--rehype:className=cols-3 style-none-->
<p><code>&#x3C;!--rehype:className=cols-3 style-none--></code></p>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="圆圈标记"><a aria-hidden="true" tabindex="-1" href="#圆圈标记"><span class="icon icon-link"></span></a>圆圈标记</h3><div class="wrap-body">
<ul class="style-round">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<!--rehype:className=style-round-->
<p><code>&#x3C;!--rehype:className=style-round--></code></p>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="箭头标记"><a aria-hidden="true" tabindex="-1" href="#箭头标记"><span class="icon icon-link"></span></a>箭头标记</h3><div class="wrap-body">
<ul class="style-arrow">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<!--rehype:className=style-arrow-->
<p><code>&#x3C;!--rehype:className=style-arrow--></code></p>
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="h2-部分---5列效果展示"><a aria-hidden="true" tabindex="-1" href="#h2-部分---5列效果展示"><span class="icon icon-link"></span></a>H2 部分 - 5列效果展示</h2><div class="wrap-body">
<!--rehype:body-class=cols-5-->
</div></div><div class="h2wrap-body cols-5"><div class="wrap h3body-not-exist" style="background:#dba300;"><div class="wrap-header h3wrap"><h3 id="one"><a aria-hidden="true" tabindex="-1" href="#one"><span class="icon icon-link"></span></a>One</h3><div class="wrap-body">
<!--rehype:wrap-style=background:#dba300;-->
<pre><code class="code-highlight"><span class="code-line">...
</span></code></pre>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="two"><a aria-hidden="true" tabindex="-1" href="#two"><span class="icon icon-link"></span></a>Two</h3><div class="wrap-body">
<pre><code class="code-highlight"><span class="code-line">...
</span></code></pre>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="three"><a aria-hidden="true" tabindex="-1" href="#three"><span class="icon icon-link"></span></a>Three</h3><div class="wrap-body">
<pre><code class="code-highlight"><span class="code-line">...
</span></code></pre>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="four"><a aria-hidden="true" tabindex="-1" href="#four"><span class="icon icon-link"></span></a>Four</h3><div class="wrap-body">
<pre><code class="code-highlight"><span class="code-line">...
</span></code></pre>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="five"><a aria-hidden="true" tabindex="-1" href="#five"><span class="icon icon-link"></span></a>Five</h3><div class="wrap-body">
<pre><code class="code-highlight"><span class="code-line">...
</span></code></pre>
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="h3-部分---占位效果展示"><a aria-hidden="true" tabindex="-1" href="#h3-部分---占位效果展示"><span class="icon icon-link"></span></a>H3 部分 - 占位效果展示</h2><div class="wrap-body">
</div></div><div class="h2wrap-body"><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="row-span-2"><a aria-hidden="true" tabindex="-1" href="#row-span-2"><span class="icon icon-link"></span></a>row-span-2</h3><div class="wrap-body">
<!--rehype:wrap-class=row-span-2-->
<pre><code class="code-highlight"><span class="code-line">...合并两行
</span></code></pre>
<p><code>&#x3C;!--rehype:wrap-class=row-span-2--></code></p>
</div></div></div><div class="wrap h3body-not-exist col-span-2"><div class="wrap-header h3wrap"><h3 id="col-span-2"><a aria-hidden="true" tabindex="-1" href="#col-span-2"><span class="icon icon-link"></span></a>col-span-2</h3><div class="wrap-body">
<!--rehype:wrap-class=col-span-2-->
<pre><code class="code-highlight"><span class="code-line">...合并两列
</span></code></pre>
<p><code>&#x3C;!--rehype:wrap-class=col-span-2--></code></p>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 style="background:#e91e63;" id="红色标题"><a aria-hidden="true" tabindex="-1" href="#红色标题"><span class="icon icon-link"></span></a>红色标题</h3><div class="wrap-body">
<!--rehype:style=background:#e91e63;-->
<pre><code class="code-highlight"><span class="code-line">...红色标题配置
</span></code></pre>
<p><code>&#x3C;!--rehype:style=background:#e91e63;--></code></p>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 style="background:#d7a100;" id="黄色标题"><a aria-hidden="true" tabindex="-1" href="#黄色标题"><span class="icon icon-link"></span></a>黄色标题</h3><div class="wrap-body">
<!--rehype:style=background:#d7a100;-->
<pre><code class="code-highlight"><span class="code-line">...黄色标题配置
</span></code></pre>
<p><code>&#x3C;!--rehype:style=background:#d7a100;--></code></p>
</div></div></div><div class="wrap h3body-not-exist col-span-3"><div class="wrap-header h3wrap"><h3 id="col-span-3"><a aria-hidden="true" tabindex="-1" href="#col-span-3"><span class="icon icon-link"></span></a>col-span-3</h3><div class="wrap-body">
<!--rehype:wrap-class=col-span-3-->
<pre><code class="code-highlight"><span class="code-line">...
</span></code></pre>
</div></div></div><div class="wrap h3body-exist"><div class="wrap-header h3wrap"><h3 id="card-child"><a aria-hidden="true" tabindex="-1" href="#card-child"><span class="icon icon-link"></span></a>Card child</h3><div class="wrap-body">
<p>Each section can have the following subitems:</p>
<h4 id="h4-subheading"><a aria-hidden="true" tabindex="-1" href="#h4-subheading"><span class="icon icon-link"></span></a>H4 subheading</h4>
<ul>
<li>pre</li>
<li>table</li>
<li>ul</li>
</ul>
<h4 id="h4-subheading-1"><a aria-hidden="true" tabindex="-1" href="#h4-subheading-1"><span class="icon icon-link"></span></a>H4 subheading</h4>
<ul>
<li>pre</li>
<li>table</li>
<li>ul</li>
</ul>
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="h3-部分-1"><a aria-hidden="true" tabindex="-1" href="#h3-部分-1"><span class="icon icon-link"></span></a>H3 部分</h3><div class="wrap-body">
<p>每个盒子(卡片)都是一个 <code>H3</code> 部分。 盒子将包含 <code>H3</code> 自身内的所有东西。</p>
<p>这是一个包含段落的基本部分。</p>
</div></div></div><div class="wrap h3body-not-exist" style="background: #1b5064;"><div class="wrap-header h3wrap"><h3 id="h3-部分背景颜色"><a aria-hidden="true" tabindex="-1" href="#h3-部分背景颜色"><span class="icon icon-link"></span></a>H3 部分背景颜色</h3><div class="wrap-body">
<!--rehype:wrap-style=background: #1b5064;-->
<pre class="wrap-text "><code class="language-markdown code-highlight"><span class="code-line">注释配置：
</span><span class="code-line"><span class="token code-snippet code keyword">`&#x3C;!--rehype:wrap-style=background: #1b5064;-->`</span>
</span></code></pre>
<!--rehype:className=wrap-text -->
</div></div></div></div></div></div></div><script src="..\..\/data.js?v=0.2.17" defer></script><script src="..\..\/js/fuse.min.js?v=0.2.17" defer></script><script src="..\..\/js/main.js?v=0.2.17" defer></script><div id="mysearch"><div class="mysearch-box"><div class="mysearch-input"><div><svg xmlns="http://www.w3.org/2000/svg" height="1em" width="1em" viewBox="0 0 18 18">
  <path fill="currentColor" d="M17.71,16.29 L14.31,12.9 C15.4069846,11.5024547 16.0022094,9.77665502 16,8 C16,3.581722 12.418278,0 8,0 C3.581722,0 0,3.581722 0,8 C0,12.418278 3.581722,16 8,16 C9.77665502,16.0022094 11.5024547,15.4069846 12.9,14.31 L16.29,17.71 C16.4777666,17.8993127 16.7333625,18.0057983 17,18.0057983 C17.2666375,18.0057983 17.5222334,17.8993127 17.71,17.71 C17.8993127,17.5222334 18.0057983,17.2666375 18.0057983,17 C18.0057983,16.7333625 17.8993127,16.4777666 17.71,16.29 Z M2,8 C2,4.6862915 4.6862915,2 8,2 C11.3137085,2 14,4.6862915 14,8 C14,11.3137085 11.3137085,14 8,14 C4.6862915,14 2,11.3137085 2,8 Z"></path>
</svg><input id="mysearch-input" type="search" placeholder="请输入搜索内容" autocomplete="off"><div class="mysearch-clear"></div></div><button id="mysearch-close" type="button">取消</button></div><div class="mysearch-result"><div id="mysearch-menu"></div><div id="mysearch-content"></div></div></div></div></body>
</html>
